<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 引用面包屑导航组件 -->
        <breadcrumb>内容管理</breadcrumb>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 引用status.vue组件 -->
        <status v-model="form.status"></status>
        <!-- 引用频道组件 -->
        <channel v-model="form.channelId"></channel>
        <el-form-item label="日期">
          <el-col :span="11">
            <el-date-picker
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="form.dateRange" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="hSearch" :loading="isloading">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:2em">
      <div slot="header" class="clearfix">
        <span>根据筛选条件查询到{{totalCount}}条数据，当前是第{{curPage}}页</span>
      </div>
      <!-- v-loading是element-ui的自定义指令 -->
      <el-table
      :data="tableData"
      v-loading="isloading"
      style="width: 100%">
      <el-table-column
        label="封面"
        width="180">
         <template slot-scope="scope">
          <el-image :src="scope.row.cover.images[0]" style="width:80px;height:80px">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">草稿</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="info">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="warning">审核失败</el-tag>
          <el-tag v-else-if="scope.row.status === 4" type="danger">已删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="pubdate"
        label="发布时间">
      </el-table-column>
      <el-table-column
        label="操作">
          <template slot-scope="scope">
          <el-button
          type="primary" icon="el-icon-edit" circle
            size="mini"
            @click="hEdit(scope.$index, scope.row)"></el-button>
          <el-button
          icon="el-icon-delete" circle
            size="mini"
            type="danger"
            @click="hDelete(scope.$index, scope.row)"></el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <el-pagination
    :disabled="isloading"
      background
      layout="prev, pager, next"
      :total="totalCount"
      @current-change="hChangePage"
      >
    </el-pagination>
    </el-card>
  </div>
</template>
<script>
// 1.完成页面布局---完成
// 2.发送请求获取数据并渲染页面---完成
// (1)处理封面---完成（自定义模板呈现图片）
// (2)处理状态---完成（自定义 使用v-if）
// 3.完成数据分页---完成
// 4.完成删除功能---完成
// 5.完成编辑功能的路由跳转---完成
// 6.实现筛选功能
// (1)先实现日期的筛选---完成
// (2) 实现状态的筛选---完成
// (3)实现频道的筛选（频道组件的封装）---完成
// 7.完成loading效果图---完成
// 8.封装status.vue组件---完成

export default {
  name: 'atical',
  data () {
    return {
      totalCount: 0,
      curPage: 1,
      isloading: false,
      form: {
        dateRange: null,
        status: null,
        channelId: null,
        delivery: false,
        type: []
      },
      tableData: []
    }
  },
  created () {
    this.loadAticals()
  },
  methods: {
    getQueryObj () {
      // 1.解构赋值
      const { dateRange, status, channelId } = this.form
      // console.log(status)
      // 2.拼接参数
      const queryObj = {
        page: this.curPage,
        status
      }
      // 判断是否有dateRange
      if (dateRange) {
        queryObj.begin_pubdate = dateRange[0]
        queryObj.end_pubdate = dateRange[1]
      }
      if (channelId) {
        queryObj.channel_id = channelId
      } else {
        queryObj.channel_id = null
      }
      return queryObj
    },
    async loadAticals () {
      try {
        const queryObj = this.getQueryObj()
        // 2.发送请求
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: queryObj
        })
        // console.log(res)
        this.totalCount = res.data.data.total_count
        this.tableData = res.data.data.results
        this.isloading = false
      } catch (err) {
        this.isloading = false
      }
    },
    // 分页切换页面
    hChangePage (CurPage) {
      // 1.更新当前页面
      // alert(CurPage)
      this.curPage = CurPage
      // 2.重新发送请求，渲染页面
      this.loadAticals()
    },
    // 删除功能
    async hDelete (index, rowData) {
      // // id值经过转化会丢失精准度
      // console.log(index, rowData.id)
      // 点击 删除键
      // const id = rowData.id.toString()
      try {
        const res = await this.$http({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + rowData.id.toString()
        })
        console.log(res)
        this.$message.success('删除成功')
        // 重新加载页面
        this.loadAticals()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    // 实现筛选功能
    hSearch () {
      this.isloading = true
      // 点击按钮
      this.loadAticals()
    },
    hEdit (index, row) {
      // 点击跳转地址
      this.$router.push('/edit/' + row.id.toString())
    }
  }
}
</script>
<style scoped lang="less">
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
